<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>th属性</title>
</head>
<body>
<div>
    <!--Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下：-->

    <!--th:id  用于替换原来的id属性-->
    <h3>--------------------th:id--------------------</h3>
    <div>
        <p id="aaa" th:id="bbb">请通过源码查看本元素的实际ID</p>
    </div>

    <!--th:text  用于替换原来的文本（转义特殊字符）-->
    <h3>--------------------th:text--------------------</h3>
    <div>
        <p th:text="'<h5>被替换后的内容（转义特殊字符）<h5/>'">被替换前的内容</p>
    </div>

    <!--th:utext  用于替换原来的文本（不转义特殊字符）-->
    <h3>--------------------th:utext--------------------</h3>
    <div>
        <p th:utext="'<h5>被替换后的内容（不转义特殊字符）<h5/>'">被替换前的内容</p>
    </div>

    <!--th:value  用于替换原来的value属性-->
    <h3>--------------------th:value--------------------</h3>
    <div>
        <input value="被替换前的内容" th:value="被替换后的内容">
    </div>

    <!--th:with  用于局部变量的赋值运算-->
    <h3>--------------------th:with--------------------</h3>
    <div>
        <p th:with="localEnv=${#locale.toString()}" th:text="${localEnv}"></p>
    </div>

    <!--th:style 设置样式-->
    <h3>--------------------th:style--------------------</h3>
    <div>
        <p style="color: red" th:style="'color:blue'">红色？蓝色！</p>
    </div>

    <!--th:onclick 设置点击事件-->
    <h3>--------------------th:onclick--------------------</h3>
    <div>
        <button onclick="hi()" th:onclick="hello()">点我！</button>
    </div>
    <script>
        function hi() {
            alert("hi")
        }

        function hello() {
            alert("hello")
        }
    </script>

    <!--th:each 遍历-->
    <h3>--------------------th:each--------------------</h3>
    <div th:each="str,strStatus:${#strings.arraySplit('aaa,bbb,bbb',',')}">
        <label th:text="${strStatus.index}"></label> <input th:value="${str}">
    </div>

    <!--th:if 根据条件判断是否需要显示元素-->
    <h3>--------------------th:if--------------------</h3>
    <div>
        <p th:if="${1==1}">显示</p>
        <p th:if="${1!=1}">不显示</p>
    </div>

    <!--th:unless 根据条件判断是否需要隐藏元素-->
    <h3>--------------------th:unless--------------------</h3>
    <div>
        <p th:unless="${1==1}">不显示</p>
        <p th:unless="${1!=1}">显示</p>
    </div>

    <!--th:switch 与Java的switch类似，根据不同的条件显示不同的元素-->
    <h3>--------------------th:switch--------------------</h3>
    <div th:switch="${#locale.getLanguage()}">
        <p th:case="${#locale.CHINESE.getLanguage()}">中文</p>
        <p th:case="${#locale.ENGLISH.getLanguage()}">英文</p>
        <p th:case="${#locale.FRENCH.getLanguage()}">法文</p>
    </div>

    <!--th:selected  select选择框选中-->
    <h3>--------------------th:selected--------------------</h3>
    <div>
        当前的语言环境是：
        <select>
            <option>其他</option>
            <option th:selected="${#locale.getLanguage()==#locale.CHINESE.getLanguage()}">中文</option>
            <option th:selected="${#locale.getLanguage()==#locale.ENGLISH.getLanguage()}">英文</option>
            <option th:selected="${#locale.getLanguage()==#locale.FRENCH.getLanguage()}">法文</option>
        </select>
    </div>

</div>
</body>
</html>